import React from 'react';
import { Tooltip } from 'antd';
import { connect } from 'react-redux';
import UserList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import moment from 'moment';

function mapStateToProps(state) {
  return {
    device_monitor_source: state.code.device_monitor_source || [],
    device_monitor_risk_label: state.code.device_monitor_risk_label || [],
  };
}
@connect(mapStateToProps)
class DeviceMonitorIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'deviceMonitor';
    this.listsComponent = UserList;
    this.model_width = 600;
    this.queryParams = {};
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.queryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.queryTableParams = {};
    this.state = {
      ...this.state,
      defaultColumns: ['req_time', 'dev_id', 'dev_token', 'app_name', 'risk_label', 'source', 'ip'],
    };
  }
  componentDidMount() {
    this.getAppCodeList();
  }
  getColumns = () => {
    return [
      {
        title: '请求时间',
        key: 'req_time',
        dataIndex: 'req_time',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '设备指纹',
        dataIndex: 'dev_id',
        key: 'dev_id',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: 'Token',
        dataIndex: 'dev_token',
        key: 'dev_token',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('所属渠道', this.state.applications, 'app_id', this.refreshTableFilterWithApp, [
              'app_id',
              'app_name',
            ])}
          </>
        ),
        dataIndex: 'app_name',
        key: 'app_name',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '操作系统',
        dataIndex: 'os',
        key: 'os',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '型号',
        dataIndex: 'os_version',
        key: 'os_version',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '风险标签',
              [...this.props.device_monitor_risk_label] || [],
              'risk_label',
              this.refreshTableFilter,
              ['key', 'value']
            )}
          </>
        ),
        dataIndex: 'risk_label',
        key: 'risk_label',
        ellipsis: true,
        render: (text, record) => {
          const txt = text.map((item) => item.name);
          return (
            <Tooltip title={txt && txt.join(',')}>
              <div>{txt.join(',')}</div>
            </Tooltip>
          );
        },
      },
      {
        title: 'SDK版本',
        dataIndex: 'sdk',
        key: 'sdk',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      // {
      //   title: '是否崩溃',
      //   dataIndex: 'is_crash',
      //   key: 'is_crash',
      //   render: (text) => {
      //     return (
      //       <Tooltip title={text} placement='topLeft'>
      //         <div>{text}</div>
      //       </Tooltip>
      //     );
      //   },
      // },
      {
        title: '设备评分',
        dataIndex: 'dev_score',
        key: 'dev_score',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: 'APP版本',
        dataIndex: 'APP_version',
        key: 'APP_version',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      // {
      //   title: '攻击框架',
      //   dataIndex: 'attack_frame',
      //   key: 'attack_frame',
      //   render: (text) => {
      //     return (
      //       <Tooltip title={text} placement='topLeft'>
      //         <div>{text}</div>
      //       </Tooltip>
      //     );
      //   },
      // },

      {
        title: (
          <>
            {this.getFilterTitle(
              '来源',
              [...this.props.device_monitor_source] || [],
              'source',
              this.refreshTableFilter,
              ['key', 'value']
            )}
          </>
        ),
        dataIndex: 'source',
        key: 'source',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '品牌',
        dataIndex: 'brand',
        key: 'brand',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: 'IP地址',
        dataIndex: 'ip',
        key: 'ip',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '网络类型',
        dataIndex: 'network_type',
        key: 'network_type',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text}</div>
            </Tooltip>
          );
        },
      },
    ];
  };
  getFilterData = () => {
    return [
      {
        type: 'rangepicker',
        key: 'time',
        name: ['between_start_req_time', 'between_end_req_time'],
        placeholder: ['开始时间', '结束时间'],
        defaultValue: [
          moment()
            .subtract(7, 'day')
            .startOf('day')
            .format('YYYY-MM-DD HH:mm:ss'),
          moment().format('YYYY-MM-DD HH:mm:ss'),
        ],
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入设备指纹|Token进行搜索',
      },
    ];
  };
  render() {
    const ListsComponent = this.listsComponent;

    return (
      <div>
        <div className='flex flex-start'>
          <div className='flex-right-wp' style={{ marginLeft: '0' }}>
            <FilterTool
              ref='filterTool'
              getFilterData={this.getFilterData}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              refresh={this.resetList}
              columns={this.getColumns()}
              setColumn={this.setColumn}
              defaultColumns={this.state.defaultColumns}
              isOnChange={true}
            />
          </div>
        </div>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            defaultColumns={this.state.defaultColumns}
            columns={this.getColumns()}
            onChangePagination={this.onChangePagination}
            rowKey={(record) => record.req_id + record.dev_id + record.sdk}
          />
        </div>
      </div>
    );
  }
}

export default DeviceMonitorIndex;
